<template>
  <div>
    <!--   导航栏开始   -->
    <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">
      <el-menu-item>LOGO</el-menu-item>
      <el-menu-item :index="cl.id" v-for="cl in Classification">{{ cl.title }}</el-menu-item>
      <el-menu-item style="float: right">
        我的
      </el-menu-item>
      <el-menu-item style="float: right">
        <el-input placeholder="请输入需要搜索的内容" v-model="append">
          <el-button slot="append" icon="el-icon-search" @click="Search()"></el-button>
        </el-input>
      </el-menu-item>


    </el-menu>
    <!-- 导航栏结束 -->

    <!--  主体部分开始  -->
    <el-container>
      <el-main style="margin: 10px">
        <el-row
            style="border: 1px solid silver;height: 50px;line-height: 50px;background-color: #d3dce6;padding: 0 10px">
          <el-col span="2" style="height: 50px">
            <el-checkbox @click="allFun()">全选</el-checkbox>
          </el-col>
          <el-col span="12">
            <span>商品</span>
          </el-col>
          <el-col span="2">
            <span>单价</span>
          </el-col>
          <el-col span="4">
            <span>数量</span>
          </el-col>
          <el-col span="2">
            <span>小计</span>
          </el-col>
          <el-col span="2">
            <span>操作</span>
          </el-col>
        </el-row>


        <el-row v-for="sp in shopping"
                style="border: 1px solid silver;margin-top: 10px;height: 80px;line-height: 80px;padding: 0 10px">

          <el-col span="1" style="height: 50px">
            <el-checkbox @click="selectFun(sp.id)"></el-checkbox>
          </el-col>

          <el-col span="13">
            <img src="" alt="">
            <span>{{ sp.title }}</span>
          </el-col>
          <el-col span="2">
            <span>{{ sp.price }}</span>
          </el-col>
          <el-col span="4">
            <el-input-number v-model="sp.quantity" @change="handleChange" :min="1" :max="99" size="mini"
                             label="描述文字"></el-input-number>
          </el-col>
          <el-col span="2">
            <span>{{ sp.quantity * sp.price }}</span>
          </el-col>
          <el-col span="2">
            <span>操作</span>
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px;float: right">
          <el-pagination
              background
              layout="prev, pager, next"
              prev-click="prev"
              next-click="next"
              :total="1000">
          </el-pagination>
        </el-row>

      </el-main>

    </el-container>
    <!--  主体部分结束   -->
    <el-row class="stickyTop">
      <el-col span="1">
        <el-checkbox @click="allFun()">全选</el-checkbox>
      </el-col>
      <el-col span="3">
        <span>删除所选中的商品</span>
      </el-col>
      <el-col span="3">
        <span>清空购物车</span>
      </el-col>
      <el-col span="3" style="float: right">
        <el-button type="danger" @click="">结算</el-button>
      </el-col>
      <el-col span="3" style="float: right">
        <span>总价：</span>
      </el-col>
      <el-col span="3" style="float: right">
        <span>已经选{{ SelectId.length }}件商品</span>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import shopping from "@/views/sys-shopping/shopping";


export default {
  data() {
    return {

      /* 上一页与下一页 */
      page:{
        pageNum: 1,
        pageSize:5,
      },
      /* 总页数 */
      pager : 5,
      /* 购物车 */
      shopping: [
        {
          id: '1',
          title: '高级食品',
          price: 100,
          quantity: 11
        },
        {
          id: '2',
          title: '高级玩具',
          price: 190,
          quantity: 13
        }, {
          id: '2',
          title: '高级玩具',
          price: 190,
          quantity: 13
        }, {
          id: '2',
          title: '高级玩具',
          price: 190,
          quantity: 13
        },],
      /* 已选列表 */
      SelectId: [],
      /* 导航栏 */
      Classification: [{title: "冬季女装", id: 1}, {title: "冬季男装", id: 2}],
      /* 搜索的内容 */
      append: '',
      url: "176.212.26.22:9090",
      activeIndex: '',
    }
  },
  computed: {
    // 被选中项的集合
    ChooseList() {
      return this.shopping.filter((item) => {
        if (this.SelectId.includes(item.id)) {
          return item
        }
      })
    },
  },
  methods: {
    /* 获取购物车 */
    getShopping(){
      console.log("获取购物车");
      /* 访问路径 */
      let url = 'http://' + this.url + '/oms/cart/list';
      console.log("url=" + url)
      this.axios.create({'headers': {'Authorization': localStorage.getItem("jwt")}}).get(url).then((response) => {
        let responseBody = response.data;
        console.log(responseBody);
        this.shopping = responseBody.data;
        this.pager = responseBody.data.totalPages;
      })
    },
    /* 搜索物品 */
    Search() {
      console.log("搜索物品")
      this.$router.push({path: '/testDemo', query: {append: this.append}});
    },
    /* 获取导航栏 */
    getClassification() {
      console.log("获取导航栏");
      /* 访问路径 */
      let url = 'http://' + this.url + '/portal/homes/navbar';
      console.log("url=" + url)
      this.axios.create({'headers': {'Authorization': localStorage.getItem("jwt")}}).get(url).then((response) => {
        let responseBody = response.data;
        console.log(responseBody);
        this.tableData = responseBody.data;
      })
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    /* 计数器 */
    handleChange(value) {
      this.tableData.shopping.quantity = value;
      console.log(value);
    },
    /* 全选 */
    allFun() {
      if (this.SelectId.length == this.shopping.length) {
        this.SelectId = [] // 判断是否已全部选中，是则清空已选列表
      } else {
        this.shopping.forEach((item) => {
          if (!this.SelectId.includes(item.id)) {
            this.SelectId.push(item.id) // 否则将未选中的全部加入已选列表中
          }
        })
      }
    },
    /* 多选 */
    selectFun(id) {
      if (!this.SelectId.includes(id)) {
        this.SelectId.push(id) // 判断已选列表中是否存在该id，不是则追加进去
      } else {
        let index = this.SelectId.indexOf(id) // 求出当前id的所在位置
        this.SelectId.splice(index, 1) // 否则则删除
      }
    },
  },
  /* 加载页面时自启动 */
  mounted() {
    console.log("mounted...")
    this.getClassification();
    this.getShopping();
  }
}
</script>

<style>
.el-col-3 {
  text-align: center !important;
}

.el-col-4 {
  text-align: center !important;
}

.stickyTop {
  bottom: 0;
  z-index: 10;
  position: fixed;
  width: 100%;
  height: 70px;
  background-color: #d3dce6;
  line-height: 70px;
  padding-left: 10px;
  padding-right: 10px;
}

</style>

